教你改变微信图文的字体！
除了干货，其它什么也没有 | ||||
职场 | 数据 | 新媒体 | 设计 | 极客 |
答疑/咨询：021 37218818
事实上，微信图文在读者面前最终呈现出的字体效果，并不完全取决于微信这款 App 本身，而是取决于阅读终端的系统环境。比如目前你正在阅读的这段文字，对于 Android 部分用户而言，可能感觉西文字体比较特殊；对于 iOS 用户而言不仅西文，中文字体也很特殊；对于 Windows Phone 用户而言，你会发现中文字体是宋体。
以下为重复文字用于比对
事实上，微信图文在读者面前最终呈现出的字体效果，并不取决于微信这款 App 本身，而是取决于阅读终端的系统环境。比如目前你正在阅读的这段文字，对于 Android 部分用户而言，可能感觉西文字体比较特殊；对于 iOS 用户而言不仅西文，中文字体也很特殊；对于 Windows Phone 用户而言，你会发现中文字体是宋体。
▼ 放大上文部分字做对比 ▼
（iOS 用户显著）
微 | 微 |
呈 | 呈 |
系 | 系 |
感 | 感 |
具体原理
对于任何机型设备而言，都有「阅读字体」和「UI 字体」，而各位 JZ 的读者肯定都知道，微信图文其实也是 HTML5，本质上是微信内置的一个网页浏览器打开了它，所以它是由 1）HTML 代码中字体的显示规则 2）手机终端支持的字体规则 两者决定的「阅读字体」文本。当我们在微信图文的代码中不对字体做任何申明时，各系统默认字体如下：
Android
DroidSans-Bold（西文）
DroidSansFallback（东亚文）
而最新版的 Android 则采用了全新的思源黑体
英文采用「Rotobo」
（点击蓝色字了解详情）
iOS
Myriad Pro（西文）
华文细黑（中文）
而 iOS 9 开始，中文采用「苹方体」
英文采用「San Francisco」
Windows
Segoe（西文）
微软雅黑（中文）
但如果我们用代码做了额外申明，情况也许就不同了。Android 在申明微信图文字体后，字体发生调整的概率最小。一方面因为 Android 开源的原因，导致不同手机中的厂商系统千差万别，适配性不统一，另一方面 Google 为 Android 默认适配的几款中文字体本身视觉差异不大。所以更多时候，Android 用户会自己在手机里安装自己喜欢的字体，完全让界面内所有文字都自定义显示。
iOS 在申明微信图文字体后，字体几乎一定可以发生改变。iOS 的封闭操作系统使得大多数苹果用户的手机系统情况接近，而苹果一向在美观层面下足功夫，譬如 MAC OX 中本身预装的字体就包括了苹果丽黑 、华文细黑、冬青黑体、兰亭黑 和 黑体-简等。而在手机上，如上文你所看到的中文字体其实是「PingFangTC-light」的功劳，也就是「蘋方-繁 細體」的表现效果。而特别的西文字体则是「Optima-Regular」实现的效果。
Windows Phone 虽然已经等于被微软遗弃，但得益于它的 Windows 操作系统，所以可以大量呈现 Windows 电脑中的一些默认预装字体。当然，通常更丑。
申明字体的方法
更改字体不仅仅是为了一时的美观，更是为了用合适的字体衬托一个公众平台的调性。
以本段落的字体为例，它就比较适合女性阅读偏多，内容偏少女、时尚或情感主题。譬如「深夜发媸」目前就采用了这种特殊字体效果。
下面我们来看一下如何通过 HTML5 代码在写图文时候改变字体。
首先请先点击阅读《微信高级排版——CSS盒模型》对 HTML5 中的样式书写规范有基本了解。然后你可以选择一款有 HTML5 编辑功能的图文编辑器，比如 iPaiban ▼
请在输入你需要改变字体的文字后，点击 HTML5 按钮进入代码编辑模式。一般来说你会发现你的文字被夹在一个 <p> 标签中，然后你需要在头部的字母 p 后加一点东西，使它看起来实现这样的最终效果▼
<p style="font-family: Optima-Regular, PingFangTC-light">这样一来你就修改了这段文字的字体</p>
以上这段代码的含义，是当这段文本被显示时不使用默认字体，而是先查询浏览器是否支持 Optima 的标准字体，如果支持则将文本中的西文均以 Optima 展示。
如果遇到东亚文无法用 Optima 展示，接下去查询浏览器是否支持 PingFangTC 的细体，如果支持则将文本中的东亚文以该字体展示。
所以文本 Style 中的字族申明是一个排序申明，如果一个文字均无法用申明的全部字体展示，则以系统默认字体展示。
如果系统默认字体也无法展示，则该位置变成一个白色黑边方砖。
如果你能搞定这样的一个样本段落，后续的写作可以直接敲下去。如果中途发生了字体还原，请使用微信后台标准编辑器的格式刷功能。
注意事项
像以上这种字体不适合过长的段落使用，否则阅读起来比较疲劳。也不适合向 JZ 这样的账号使用，除非我们是少女技术号。当然，要让一个品牌的微信公众平台展现品牌的独特调性决不止字体一方面，排版还包含了配色、缩进、字号、缩进、行间距、字间距、配图等方方面面的内容。
如果你希望学习到更进阶的高级排版，包括上述这些细节艺术设计理论和 PS/AI 使用、CSS 代码、SVG 动画和微信动态二维码设计原理等课程，也可以加入 JZ 的网易云课堂顶级排版课程。课程目录如下，平均每节课时长在 40 分钟左右，部分视频超过一小时。（课程可开具增值税普通发票）
（上下滑动小手机屏幕）
长按识别二维码 立刻加入课程吧 |
如果你是在校学生组织成员、指导老师，也可以申请我们的公益讲座。点击第四轮「新媒体运营与 HTML5 设计」高校公益巡讲申请办法与我们联系，让更多大学生掌握进阶新媒体运营战略意识和技术知识。
企业如需咨询培训、定制等服务，请致电
021-37218818
其他你会感兴趣的内容
回复 排版了解专业数字化排版方法
回复 标题看更多标题酝酿创意策略
回复 大 V阅读圈内一些过去的风雨
回复 广告学习专业广告投放与设计
回复 H 5入门数字化营销设计行业
H5、平面、视频等数字营销服务请致电
TEL：（021）3721 8818
客户案例：APEC 峰会 | 中国航天科技集团 | 香奈儿 | 肯德基（湖南） | 中国国际航空 | 湖北省电视台 | 河南卫视 | 浙江省人民广播电台 | 三生制药 | 交通银行 | 建设银行 | 真格基金 | 南方周末 | 上海闵行教育学院 | 牛津大学出版社 | 新东方集团 | 伟巴斯特 | 雪佛兰汽车 | 观致汽车 | 雷诺汽车 | TNS 新华信 | 高力国际｜第一太平戴维斯｜德国莱茵｜盖茨基金会｜追星集团
抱歉，除了干货，其他什么也没有。